<template>
	<div class="myorder" :class="this.$store.getters.isIphoneX ? 'pad-top80' : 'pad-top'">
		<back-header title="我的订单"></back-header>
		<div class="myorder_warp">
			<app-loading v-if="!order"></app-loading>
			<div v-else-if="order.length == 0" style="text-align: center;padding:100px 0;font-size:16px;color:#555;">暂无订单</div>
			<ul v-else class="myorder_list">
				<li v-for="item in order">
					<template v-for="toy in item.toy">
						<div class="orderitem">
							<div class="orderimg">
								<img :src="toy.cover">
							</div>
							<div class="order_info">
								<p>{{toy.title}}</p>
								<p>x{{toy.count}}</p>
							</div>
						</div>
					</template>
					<div class="orderintro">
						订单号：{{item.sid}}
					</div>
					<div class="orderintro">
						创建日期：{{item.create_at}}
					</div>
					<div class="orderintro">
						收货人：{{item.name}} 联系电话：{{item.phone}}
					</div>
					<div class="orderintro">
						收货地址：{{item.region}} {{item.address}}
					</div>
					<div class="orderintro">
						快递单号：{{item.ems_num ? item.ems_num : " 暂无数据"}}
					</div>
					<label class="orderstatus" :class='item.state == "0" ? "waring" : item.state == "1" ? "success" : "success"'>{{item.state == '0' ? "待处理" : item.state == "1" ? "已发货" : "已收货"}}</label>
				</li>
			</ul>
		</div>
	</div>
</template>
<script type="text/javascript">
	import appLoading from '../components/loading'
	import backHeader from '../components/backHeader'
	export default{
		name:"myOrder",
		components:{backHeader,appLoading},
		data(){
			return {
				order:"",
			}
		},
		mounted(){
			this.orderList();
		},
		methods:{
			orderList(){
				this.$jsonp(`${this.URL_PREFIX}/OpenAPI/V1/User/orderList`,{token:this.$store.state.userInfo.token,page:1}).then((response) => {
		              console.log(response)
		              if(response.data.list){
		              	this.order = response.data.list;
		              }else{
		              	this.order = [];
		              }
		              
		  		 })
			}
		}
	}
</script>
<style lang="less" scoped>
	.myorder_list{
		width: 100%;
	}
	.myorder_list li {
	    position: relative;
	    padding: 10px;
	    margin-bottom: 10px;
	    background: #fff;
	    font-size: 14px;
	    border-bottom: 1px solid #eee;
	}
	.orderitem {
	    display: flex;
	    color: #333;
	    margin-bottom: 10px
	}

	.orderitem .order_info {
	    flex-grow: 2
	}

	.orderitem .orderimg {
	    width: 60px;
	    border: 2px solid #f99713;
	    border-radius: 5px;
	    margin-right: 10px;
	    overflow: hidden
	}

	.orderitem .orderimg img {
	    width: 100%;
	    height: 52px;
	    display: block
	}
	.myorder_list li .orderintro {
	    color: #838282;
	    font-size: 12px
	}

	.orderstatus {
	    position: absolute;
	    bottom: 10px;
	    right: 5px
	}

	.orderstatus.waring {
	    color: #ee6f07
	}

	.orderstatus.success {
	    color: #0ea011
	}
</style>